<template>
    <div id="office">
        <div class="crumbs">
            <!--导航栏-->
            <el-breadcrumb separator="/">
                <el-breadcrumb-item to="/welcome">
                    <i class="iconfont icon-home nav-icon"></i>
                </el-breadcrumb-item>
                <el-breadcrumb-item class="no-active">科室管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <!--查询表单-->
            <el-form :inline="true" size="mini" :model="query" class="demo-form-inline">
                <el-form-item>
                    <el-input v-model="query.search" placeholder="请输入科室编号或名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="pageSearchHandler">查询</el-button>
                    <el-button type="success" icon="el-icon-plus" @click="addPageHandler">添加</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!--表格-->
        <div class="container table">
            <el-table :data="tableData" border stripe class="table_td">
                <el-table-column prop="id" label="科室编号"></el-table-column>
                <el-table-column prop="officeCode" label="科室编码"></el-table-column>
                <el-table-column prop="officeName" label="科室名称"></el-table-column>
                <el-table-column prop="officeTypeId" label="科室分类" :formatter="typeFormatter"></el-table-column>
                <el-table-column prop="officeCategoryId" label="科室类别" :formatter="categoryFormatter"></el-table-column>
                <el-table-column prop="createTime" label="操作时间"></el-table-column>
                <el-table-column width="140px" align="center" label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="editPageBtnHandler(scope.row)"><i class="el-icon-edit"></i>编辑</el-button>
                        <el-button type="text" size="small" @click="delBtnHandler(scope.row)"><i class="el-icon-delete"></i>删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页-->
            <div class="table_page">
                <el-pagination
                        background
                        layout="prev, pager, next"
                        small
                        :current-page="query.pageIndex"
                        :page-size="query.pageSize"
                        :total="pageTotal"
                        @current-change="pageIndexHandler">
                </el-pagination>
            </div>
        </div>
        <!--添加的对话框-->
        <div class="dialog">
            <el-dialog title="科室操作" :visible.sync="dialogVisible">
                <el-form size="mini" :model="form" :rules="rules" ref="ruleForm" label-width="120px">
                    <el-form-item label="科室名称" prop="officeName">
                        <el-input v-model="form.officeName" placeholder="科室名称"></el-input>
                    </el-form-item>
                    <el-form-item label="科室类别" prop="officeCategoryId">
                        <el-select v-model="form.officeCategoryId" placeholder="科室类别">
                            <el-option v-for="category of officeCategorys" :label="category.constantName" :value="category.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="科室分类" prop="officeTypeId">
                        <el-select v-model="form.officeTypeId" placeholder="科室分类">
                            <el-option v-for="type of officeTypes" :label="type.constantName" :value="type.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="info" native-type="reset" icon="el-icon-refresh-right" >重置</el-button>
                        <el-button v-if="isEditPage" type="success" icon="el-icon-edit" @click="editBtnHandler">编辑</el-button>
                        <el-button v-else type="success" icon="el-icon-plus" @click="addBtnHandler">添加</el-button>
                        <el-button type="primary" icon="el-icon-close" @click="dialogVisible=false">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'office',
        data(){
            return {
                query:{
                    search:'', //查询条件
                    pageIndex:1, //页码
                    pageSize:10 //每页显示的条数
                },
                form:{
                    id:'',//主键ID
                    officeName:'', //名称
                    officeTypeId:'', //分类
                    officeCategoryId:'' //类别
                },
                pageTotal:0, //总条数
                tableData: [], //表格数据
                dialogVisible:false, //对话框显示标识
                isEditPage:false,//是否是为编辑页面
                officeTypes:[], //科室分类
                officeCategorys:[], //科室类别
                rules:{
                    officeName :[{ required: true, message: '请输入科室名称', trigger: 'blur' }],
                    officeTypeId :[{ required: true, message: '请选择科室分类', trigger: 'blur' }],
                    officeCategoryId :[{ required: true, message: '请选择科室类别', trigger: 'blur' }]
                }
            }
        },
        methods:{
            //分页查询
            pageSearchHandler(){
                this.$api.office.page(this.query).then(res=>{
                    this.tableData = res.data;
                    this.pageTotal = res.total;
                });
            },
            //点击页码查询
            pageIndexHandler(index){
                this.query.pageIndex = index;
                this.pageSearchHandler();
            },
            //显示添加弹出层
            addPageHandler(){
                this.form={
                    officeCode:'', //编码
                    officeName:'', //名称
                    officeTypeId:'', //分类
                    officeCategoryId:'' //类别
                };
                this.isEditPage = false;
                this.dialogVisible = true
            },
            //添加
            addBtnHandler(){
                this.$refs['ruleForm'].validate((valid) => {
                    if (valid) {
                        this.$api.office.save(this.form).then(res=>{
                            if(res.code === 200){
                                //关闭添加的弹出层
                                this.dialogVisible = false;
                                //加载列表
                                this.pageSearchHandler();
                                this.$message.success(res.msg);
                            }
                        });
                    } else {
                        this.$message.error('请输入必填项信息');
                        return false;
                    }
                });
            },
            //删除
            delBtnHandler(row){
                this.$confirm('此操作将永久删除该数据, 是否继续?', '删除提示', { type: 'warning'}).then(() => {
                    this.$api.office.delById(row.id).then(res=>{
                        if(res.code === 200){
                            //重新加载列表
                            this.pageSearchHandler();
                            this.$message.success(res.msg);
                        }
                    });
                }).catch(() => {
                    this.$message.info('已取消删除');
                });
            },
            //显示修改页面
            editPageBtnHandler(row){
                this.form.id = row.id;
                this.form.officeCode = row.officeCode;
                this.form.officeName = row.officeName;
                this.form.officeTypeId = Number.parseInt(row.officeTypeId);
                this.form.officeCategoryId = Number.parseInt(row.officeCategoryId);
                this.dialogVisible= true;
                this.isEditPage = true;
            },
            //科室编辑
            editBtnHandler(){
                this.$refs['ruleForm'].validate((valid) => {
                    if (valid) {
                        this.$api.office.editById(this.form).then(res=>{
                            if(res.code===200){
                                this.dialogVisible=false;
                                this.pageSearchHandler();
                                this.$message.success(res.msg);
                            }
                        });
                    } else {
                        this.$message.error('请输入必填项信息');
                        return false;
                    }
                });
            },
            //type格式化
            typeFormatter(row,col,cellVal){
                let officeType = "";
                this.officeTypes.forEach(value => {
                    if(cellVal == value.id){
                        officeType =  value.constantName;
                    }
                });
                return officeType;
            },
            //category格式化
            categoryFormatter(row,col,cellVal){
                let categoryType = "";
                this.officeCategorys.forEach(value => {
                    if(cellVal == value.id){
                        categoryType = value.constantName;
                    }
                });
                return categoryType;
            }
        },
        mounted() {
            this.pageSearchHandler();
            //查询科室分类
            this.$api.constant.listByConstantCode('KSFL').then(res=>{
                this.officeTypes = res.data;
            });
            //查询科室类别
            this.$api.constant.listByConstantCode('KSLB').then(res=>{
                this.officeCategorys = res.data;
            });
        }
    };
</script>

<style scoped>

</style>